<template>
    <div class="foodcategory">
        <div class="foodcategory-search">
            <van-nav-bar left-arrow left-text="返回" title="分类" @click-left="back">
<!--                <template #title>-->
<!--                    <van-search v-model="searchValue" placeholder="请输入搜索关键词"  shape="round"/>-->
<!--                </template>-->
            </van-nav-bar>

        </div>
        <div class="foodcategory-kind">
            <van-tabs v-model="active" @click="mySwitch" sticky swipeable>
                <van-tab v-for="cur in kinds" :name="cur.food_kind_id" :title="cur.food_kind_name" >
                    <div class="foodList">
                        <van-card
                                v-for="food in foods[active]"
                                :key="food.food_id"
                                :num="food.food_remain_number"
                                :price="food.food_price"
                                :desc="food.food_depiction"
                                :title="food.food_name"
                                @click="()=>{clickCard(food.food_id)}"
                                :thumb="`http://localhost:8080/res/${food.food_img}`"
                        >
                        </van-card>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FoodCategory",
        data() {
            return {
                foods:[],
                active: 1,
                searchValue: '',
                kinds:[],
                foodsKind: [],
            };
        },
        created(){
            if(this.$route.params.kind){
                this.active=this.$route.params.kind;
            }
            this.axios.get(this.GLOBAL.foodKinds).then(res=>{
                this.kinds=res.data.foodkindList;
                console.log(this.kinds);
            });
            this.axios.post(this.GLOBAL.foodsKind,{foodkindid:this.active}).then(res=>{
                this.$set(this.foods,this.active,res.data.foodList);
            });
        },
        methods:{
            back(){
                this.$router.go(-1);
            },
            mySwitch(){
                if(!this.foods[this.active]){
                    this.axios.post(this.GLOBAL.foodsKind,{foodkindid:this.active}).then(res=>{
                        this.$set(this.foods,this.active,res.data.foodList);
                    });
                }
            },
            clickCard(foodID){
                this.$router.push({
                    name:'FoodDetail',
                    params:{
                        food_id:foodID,
                    }
                });
            },
        }
    }
</script>

<style scoped lang="less">


    .foodcategory-search{
        position: sticky;
    }
    .foodcategory-kind{
        overflow: auto;
        margin: 0 auto;
    }

</style>